<template>
	<view class="mainBox">
		<view class="content">
			<view class="df" style="flex-wrap: wrap;">
				<view class="m10" v-if="videoSrc.length != 0" style="position: relative;"
					v-for="(item,index) in videoSrc" :key="index">
					<video id="myVideo" @click="fullScreenTab(item,index)" :src="item"
						style="width: 190rpx;height: 190rpx;" controls>
						<cover-view class="maskBox" @click="fullScreenTab(item,index)">
						</cover-view>
					</video>
					<view class="delVideo" @click="deleteVideo(item,index)">
						<u-icon class="u-icon" name="close" size="20" color="white"></u-icon>
						
					</view>
				</view>

				<view v-if="videoSrc.length < num" @click="chooseVideo"
					class="">
					<view slot="addBtn" class="slot-btn df aic jcc"
						hover-stay-time="150">
						<nmr-icon name="zhaopian" color="#48A147" size="36"></nmr-icon>
						上传视频凭证
					</view>
				</view>
			</view>
		</view>
		<view class="videoMask pr" v-if="videoFull">
			<video v-if="videoFlag === 'w'" :autoplay="true" :show-fullscreen-btn="false" :src="fullscreenUrl"
				style="width: 100vw;" controls>
				<cover-image src="../static/maskCha.png" @click="videoClose" class="closeBox" mode="">
				</cover-image>
			</video>
			<video v-else :autoplay="true" :show-fullscreen-btn="false" :src="IMG_BASE + fullscreenUrl"
				style="width: 100vw;height: 98vh;" controls>
				<cover-image src="../static/maskCha.png" @click="videoClose" class="closeBox" mode="">
				</cover-image>
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			videoSrc: {
				type: Array,
				default () {
					return []
				}
			},
			num: {
				type: Number,
				default () {
					return 1
				}
			}
		},
		data() {
			return {
				IMG_BASE:this.IMG_BASE,
				text: '',
				imgPaths: '',
				imgList: [],
				temp: [],
				// videoSrc: [],
				sourceTypeIndex: 2,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				VideoOfImagesShow: true,
				cameraIndex: 0,
				videoFull: false,
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				upLoadType: 0,
				videoFlag: '',
				fullscreenUrl: ''
			}
		},

		created() {
		},
		methods: {
			clearVideo() {
				this.$emit('uploadVideo', [])
			},
			deleteVideo(item, index) {
				this.videoSrc.splice(index, 1)
				console.log(this.videoSrc)
				this.$emit('uploadVideo', this.videoSrc)

			},
			videoRef() {

			},
			deleteFile: function(e) {
				const that = this;
				this.imgList.splice(e, 1);
				this.temp.splice(e, 1);
				that.imgPaths = '';
				this.temp.forEach(item => that.imgPaths = that.imgPaths + item + '|');
				console.log('imgPaths', this.imgPaths);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			gotoRule: function(item) {
				uni.navigateTo({
					url: './feedbackList',
				})
				// }
			},
			onblur(e) {
				this.text = e.target.value;
			},
			chooseVideo() {
			
				this.imgList = []
				const that = this;
				this.upLoadType = 1
				// 上传视频
				console.log(this.cameraList[this.cameraIndex].value)
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album', 'camera'],
					compressed: true,
					success: (responent) => {
						console.log(responent)
						let videoFile = responent.tempFilePath;
						uni.uploadFile({
							url: this.APPUPLOAD,
							filePath: videoFile,
							name: 'file',
							success: (res) => {
								let videoUrls = JSON.parse(res.data) //百度支持
								console.log(videoUrls)
								if (videoUrls.code === 200) {
									that.videoSrc.push(videoUrls.data.url)
									console.log(that.videoSrc)
									that.$emit('uploadVideo', that.videoSrc)
								} else {
									uni.showToast({
										title: videoUrls.msg,
										icon: 'none'
									})
								}
							}
						})
					}
				})
			},
			// 视频全屏播放
			fullScreenTab(item, index) {
				let videoPlay = item
				uni.navigateTo({
					url:'/pages/fullScreenPlay?url=' + videoPlay
				})
				// e.preventDefault()
				// console.log(item)
				// this.videoFull = true
				// // 获取视频信息 判断图片的宽高
				// let that = this
				// this.fullscreenUrl = item
				// // this.$emit('videoFlagChange', this.videoFull)
				// uni.getVideoInfo({
				// 	src: this.IMG_BASE + item,
				// 	success(res) {
				// 		console.log(res)
				// 		if (res.height > res.width) {
				// 			this.videoFlag = 'h'
				// 		} else {
				// 			this.videoFlag = 'w'
				// 		}
				// 		// console.log(this.videoFlag)
				// 	}
				// })
			},
			videoClose() {
				this.videoFull = false
				this.$emit('videoFlagChange', this.videoFull)
			},



		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	background: #F6F6F6;
	// }
	.mainBox {
		// height:60vh;
		// min-height: 100vh;
		background: #FFFFFF;

	}

	.myTop {
		position: relative;
		height: 88rpx;
		width: 100%;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-weight: normal;
		color: #333333;
		opacity: 1;
		display: flex;
		flex-direction: row-reverse;

	}

	.ruleText {
		font-size: 30rpx;
		font-family: '.PingFang SC';
		font-weight: 300;
		margin-right: 34rpx;
		opacity: 0.9;
	}
.slot-btn {
		width: 200rpx;
		height: 200rpx;
		background: #FFFAF7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx dashed #48A147;
		color: #48A147;
		flex-direction: column;
		background-color: #F0FFF0;
	}
	.myTop span {
		// width: 108rpx;
		// height: 50rpx;
		font-size: 36rpx;
		font-weight: normal;
		// line-height: 50rpx;
		opacity: 1;
		display: inline-block;
		// margin: 21rpx 0 0 331rpx;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 50%;
		position: absolute;
	}

	.back {
		// margin: 27rpx 47rpx 0 225rpx;
		position: absolute;
		top: 50%;
		left: 20rpx;
		transform: translate(0, -50%);
		vertical-align: bottom;
		width: 32upx;
		height: 32upx;
	}

	.delVideo {
		opacity: 1;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 0;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		background-color: #d81e06;
		border-radius: 100rpx;
		align-items: center;
		justify-content: center;
	}
	.viewWrapper {
		/* display: flex; */
		position: relative;
		background:  #F0FFF0;
		border-radius: 10rpx;
		border: 1rpx dashed #48A147;
		color: #48A147;
		box-sizing: border-box;
		text-align: center;

		.text {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #48A147;
		}
	}

	.clearicon {
		color: #fff;
		z-index: 9999;
		position: absolute;
		right: 0;
		top: 0;
		width: 34rpx;
		height: 34rpx;
	}

	.inline-block {
		display: inline-block;
		margin-left: 10rpx;
	}

	.iconimage {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		/* margin-left: 20rpx; */
		/* border: 2rpx solid #D9D9D9; */
		// margin-bottom: 40rpx;
	}

	.content {
		// width: 98vw;
		margin: 0 auto;
		// border: solid #c6ccd5 1px;
		box-sizing: border-box;
		// padding: 20upx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.upfile {
		display: flex;
		/* align-items: center; */
		/* justify-content: flex-end; */
		margin-bottom: 10rpx;
		margin-left: 20rpx;
	}

	.uptext {
		color: #bfbfbf;
		margin-left: 6rpx;
	}

	.btn {
		background-color: #fff;
	}

	button {
		width: 90%;
		height: 70rpx;
		background: #33B775;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 10rpx;
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.text {
		height: 160rpx;
		display: block;
		width: 98% !important;
	}

	.uni-textarea-wrapper {
		width: 98vw !important;
	}

	.maskBox {
		position: absolute;
		width: 160rpx;
		height: 160rpx;
		// z-index: 999;
		top: 0rpx;
		left: 0rpx;
	}

	.videoMask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0rpx;
		left: 0;
		z-index: 10000;
	}

	.closeBox {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 88rpx;
		right: 30rpx;
		z-index: 99999;
	}
</style>
